<template>
	<view>
		<u-toast ref="uToast" />
		<view class="fff">
			<!-- 轮播图 -->
			<view class="mt16 mh32">
				<u-image height="372rpx" border-radius="16rpx" :src="datalist.img"></u-image>
				<!-- <u-swiper :list="banner" height="372"></u-swiper> -->
			</view>
			<!-- 详情-->
			<view class="fff" style="position: relative;">
				<view style="margin-left: 62rpx; margin-right: 62rpx;">
					<view class="text36 mt21" style="font-weight: bold;">{{ datalist.name }}</view>
					<view class="mt16 mainRow sb mainAlignCenter">
						<view class="colorF3">
							<text>￥</text>
							<text class="text32" style="font-weight: bold;">{{ datalist.price }}万</text>
						</view>
						<view class="xdj" @click="show = true">询底价</view>
					</view>
					<view class="text32">
						新车含税价：
						<text style="font-weight: bold">￥{{ datalist.new_price }}万</text>
					</view>
					<view class="text36 mt28" style="font-weight: bold;">车辆信息</view>
					<view class="mainRow sb text28">
						<view>
							<view class="mt20">
								上牌时间：
								<text>{{ datalist.licensing_time }}</text>
							</view>
							<view class="mt20">
								表显里程：
								<text>{{ datalist.mileage }}</text>
							</view>
							<view class="mt20">
								房车类型：
								<text>{{ datalist.lb }}</text>
							</view>
							<view class="mt20">
								房车底盘：
								<text>{{ datalist.db }}</text>
							</view>
							<view class="mt20">
								核准驾照：
								<text>{{ datalist.driving_license }}</text>
							</view>
						</view>
						<view>
							<view class="mt20">
								上牌地：
								<text>{{ datalist.licensed_land }}</text>
							</view>
							<view class="mt20">
								车源地：
								<text>{{ datalist.vehicle_source }}</text>
							</view>
							<view class="mt20">
								变速箱：
								<text>{{ gearbox(datalist.gearbox) }}</text>
							</view>
							<view class="mt20">
								排放标准：
								<text>{{ datalist.discharge }}</text>
							</view>
							<view class="mt20">
								过户次数：
								<text>{{ datalist.transfer_times }}</text>
							</view>
						</view>
					</view>
					<view class="text36 mt28" style="font-weight: bold;">车次描述</view>
					<view style="margin-top: 12rpx;">
						<text>{{ datalist.introduce }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="fff mt16">
			<view class="mainRow center" style="padding-top: 66rpx; padding-bottom: 36rpx;"><text class="text40"
					style="font-weight: bold;">房车介绍</text></view>
			<view class="mh32">
				<u-parse :content="datalist.detail" :lazyLoad="true" loadingImg="/static/blue_start.png"></u-parse>
			</view>
		</view>
		<!-- 分享收藏底部 -->
		<view class="mainRow mainAlignCenter d1" style='display: flex;'>
			<view class="mainRow mainJSpace" style="width: 50%;display: flex;justify-content: space-around;">
				<view @click="share">
					<u-icon name="share" label="分享" label-pos="bottom" color="#6f6d6d" size="30"></u-icon>
				</view>
				<view @click="collect" v-if="datalist.is_collect == 0">
					<u-icon name="star" label="收藏" label-pos="bottom" color="#6f6d6d" size="30"></u-icon>
				</view>
				<view @click="collect" v-else>
					<u-icon name="star-fill" label="收藏" label-pos="bottom" color="#105CF0" size="30"></u-icon>
				</view>
			</view>
			<view class="text36 d2 mainRow center fontWe" @click="show = true">询底价</view>
		</view>
		<!-- 分享组件 -->
		<view v-if='is_share'>
			<u-popup :show="is_share" @close="close" @open="open">
				<share :share='["qq","WXSceneTimeline"]'></share>
			</u-popup>
		</view>
	</view>
</template>

<script>
import { carDetail } from '@/api/car.js'
import share from '@/components/common/share.vue'
export default{
	data () {
		return {
			is_share:false,
			datalist:{}
		}
	},
	onLoad( options ){
		carDetail({
			id:options.id
		}).then(res=>{
			this.datalist = res.data;
			console.log( res )
		})
	},
	methods:{
		//变速箱判断
		gearbox(gea) {
			return gea == 1 ? '手动' : gea == 2 ? '自动' : gea == 3 ? '手自一体' : '';
		},
		//点击分享
		share(){
			this.is_share = true;
		},
		open() {
		  // console.log('open');
		},
		close() {
		  this.is_share = false
		  // console.log('close');
		}
	},
	components:{
		share
	}
}
</script>

<style>
	page {
		background: #f5f8ff;
	}

	.fff {
		background: #ffffff;
		padding-bottom: 36rpx;
	}

	.d1 {
		width: 100%;
		height: 98rpx;
		background: #ffffff;
		position: fixed;
		bottom: 0rpx;
		z-index: 999;
	}

	.d2 {
		width: 50%;
		height: 100%;
		background: linear-gradient(140deg, #fcdf33 0%, #ee9b1f 100%);
	}

	.xdj {
		width: 154rpx;
		height: 52rpx;
		border-radius: 60rpx;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #fcdf33 0%, #ee9b1f 100%);
	}

	.popup01 {
		border-top: 2rpx solid #cbcdca;
		margin-bottom: 52rpx;
	}
</style>
